<template>
  <div class="divWarehouse">
    <!-- 搜索 -->
    <div class="box divHead">
      <div class="serchForm">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="search"
        >
          <el-row :gutter="30">
            <el-col :span="8">
              <el-form-item
                label="仓库名称"
                prop="warehouseName"
              >
                <el-input
                  v-model="search.warehouseName"
                  placeholder="请输入"
                  @input="resetPageIndex"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="库区名称"
                prop="name"
              >
                <el-input
                  v-model="search.name"
                  placeholder="请输入"
                  @input="resetPageIndex"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="仓库状态"
                prop="status"
              >
                <el-select
                  v-model="search.status"
                  clearable
                  placeholder="请选择"
                  @change="resetPageIndex"
                >
                  <el-option
                    v-for="item in statusSelectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="textRight">
        <base-button
          class="minorImportantButton btnSearch"
          @click="handleSearch"
        >搜索</base-button>
        <base-button
          class="unimportanceButton"
          @click="handleReset"
        >重置</base-button>
      </div>
    </div>
    <!-- end -->
    <div class="box divContent">
      <div class="tableInfo">
        <base-button
          class="importantButton"
          @click="handleAdd"
        >新增库区</base-button>
        <div class="textRight">
          <base-button
            class="unimportanceButton"
            @click="handelDownload"
          >下载库区模版</base-button>
          <base-button
            class="unimportanceButton"
            @click="handleImport"
          >导入库区信息</base-button>
        </div>
      </div>
      <!-- 表格数据 -->
      <div v-if="areaListData.length>0">
        <el-table
          :data="areaListData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            type="index"
            label="序号"
            width="68"
          />
          <el-table-column
            prop="warehouseName"
            label="所属仓库"
            width="160"
          />
          <el-table-column
            prop="code"
            label="库区编号"
            width="160"
          />
          <el-table-column
            prop="name"
            label="库区名称"
            width="160"
          />
          <el-table-column
            prop="temperatureType"
            label="温度类型"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if="row.temperatureType==='CW'">常温</span>
              <span v-if="row.temperatureType==='LC'">冷藏</span>
              <span v-if="row.temperatureType==='HW'">恒温</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="bearingType"
            label="承重类型"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if="row.bearingType==='ZX'">重型</span>
              <span v-if="row.bearingType==='QX'">轻型</span>
              <span v-if="row.bearingType === 'BX'">中型</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="useType"
            label="用途属性"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if="row.useType==='RKHCQ'">入库缓存区</span>
              <span v-if="row.useType==='CKHCQ'">出库缓存区</span>
              <span v-if="row.useType==='CCQ'">存储区</span>
              <span v-if="row.useType==='FJQ'">分拣区</span>
              <span v-if="row.useType==='ZJQ'">质检区</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="库区状态"
            width="160"
          >
            <template slot-scope="{ row }">
              <span v-if='row.status===1'>启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="personName"
            label="负责人"
            width="160"
          />
          <el-table-column
            prop="phone"
            label="联系电话"
            width="160"
          />
          <el-table-column
            prop="includedNum"
            label="库位数量"
            width="150"
          />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="200"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
          >
            <template slot-scope="{ row }">
              <base-button
                class="fontOperateButton"
                @click="handleEdit(row.id)"
              >编辑</base-button>
              <base-button
                class="fontOperateButton"
                @click="handleStatus(row)"
              ><span v-if="row.status===0">启用</span><span v-else>停用</span></base-button>
              <base-button
                class="fontOperateButton"
                @click="handleDelect(row)"
              >删除</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <base-pagination
          :total="total"
          :limit="search.size"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></base-pagination>
        <!-- end -->
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无库区</p>
      </div>
      <!-- 删除 -->
      <dialog-base
        :visible="dialogData.visible"
        :dialogData="dialogData"
        @handlesubmit="handleSubmit"
        @handleclose="handleClose"
      ></dialog-base>
      <!-- end -->
      <!-- 启用停用 -->
      <dialog-base
        :visible="dialogData.satatusVisible"
        :dialogData="dialogData"
        @handlesubmit="handleStatusSubmit"
        @handleclose="handleStatusClose"
      ></dialog-base>
      <!-- end -->
      <!-- 导入对话框 -->
      <upload-file
        ref="fileDialog"
        :dialogData="dialogData"
        @handleclose="handleCloseFile"
      ></upload-file>
      <!-- end -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
import UploadFile from '@/components/UploadFile/index.vue'
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// 本模块组件
import DialogBase from './components/dialog.vue'
// interface接口
import { IAreaTableData } from '@/module-base/interface/area'
import { ICommonReturn, ICommonSelectOptions } from '@/utils/common-interface'
// 启用，禁用
import { warehouseStatusSelectOptions } from '@/utils/common-select-data'
// api数据接口
import { getAreaList, updateArea, deleteArea } from '@/module-base/api/area'
import { mixins } from 'vue-class-component'
import SinglePage from '@/mixin/single-page'
@Component({
  name: 'AreaList',
  components: {
    BaseButton,
    BasePagination,
    DialogBase,
    UploadFile
  }
})
export default class extends mixins(SinglePage) {
  private areaListData: IAreaTableData[] = [] // 数据列表
  private total = 0
  private ref: any = this.$refs
  private statusSelectOptions: ICommonSelectOptions[] = []
  private loading = false
  private delectData = []
  private deleData = {}
  // private status = null // 状态  0 停用 1启用
  private statusType = ''
  private search = {
    id: '', // id
    name: '', // 库区名称
    warehouseName: '', // 仓库名称
    status: undefined,
    size: 10, // 每页显示10条
    current: 1 // 当前页
  }

  private dialogData = {
    id: '',
    msg: '',
    status: -1,
    dialogTitle: '',
    updatedTitle: '库区',
    visible: false,
    satatusVisible: false,
    isFileVisible: false,
    uploadUrl: '/api/area/importExcel'
  }

  created() {
    this.getList()
    this.statusSelectOptions = warehouseStatusSelectOptions
  }

  // 功能
  private handleSearch() {
    this.getList()
  }

  // 获取数据
  private async getList() {
    this.loading = true
    const params = {
      ...this.search
    }
    if (this.search.status === -1) {
      delete params.status
    }
    const { data } = await getAreaList(params)
    this.loading = false
    this.areaListData = data.records
    this.total = parseInt(data.total, 10)
  }

  // TODO可以删除，此库区下有库位/货品等业务数据，不能删除
  // 删除数据
  handleDelect(val: any) {
    if (this.confirmMsg()) {
      return
    }
    this.dialogData.visible = true
    this.dialogData.msg = `确定要删除库区：${val.name} 吗？`
    this.dialogData.id = val.id
    this.dialogData.dialogTitle = '确认删除'
  }

  // 确定删除
  private async handleSubmit() {
    const ids = [this.dialogData.id]
    const data: any = ((await deleteArea({
      ids: ids
    })) as unknown) as ICommonReturn
    if (data.code === 0) {
      this.dialogData.visible = false
      this.$message.success('删除成功')
      this.getList()
    } else {
      this.$message.error(data.msg)
    }
  }

  // 启用停用
  handleStatus(val: any) {
    const type = val.status === 0 ? '启用' : '停用'
    this.statusType = type
    this.dialogData.msg = `确定要${type}库区：${val.name} 吗？`
    this.dialogData.id = val.id
    this.dialogData.status = val.status === 0 ? 1 : 0
    this.dialogData.satatusVisible = true
    this.dialogData.dialogTitle = `确认${type}`
  }

  // 确定启用停用
  private async handleStatusSubmit() {
    const obj = {
      id: this.dialogData.id,
      status: this.dialogData.status
    }
    const data: any = ((await updateArea(obj)) as unknown) as ICommonReturn
    this.dialogData.satatusVisible = false
    if (data.code === 0) {
      this.$message.success(this.statusType + '成功')
      this.getList()
    } else {
      this.$message.error(data.msg)
    }
  }

  // ui
  // 添加库区
  private handleAdd() {
    if (this.confirmMsg()) {
      return
    }
    this.$router.push({ path: 'area/details/null' })
  }

  // 编辑库区
  private handleEdit(id: string) {
    if (this.confirmMsg()) {
      return
    }
    this.$router.push({ path: `area/details/${id}` })
  }

  // 重置
  handleReset() {
    this.ref.ruleForm.resetFields()
    this.resetPageIndex()
    this.getList()
  }

  // 当前页
  private handleCurrentChange(page: number) {
    this.search.current = page
    this.getList()
  }

  // 每页条数
  private handleSizeChange(page: number) {
    this.search.size = page
    this.resetPageIndex()
    this.getList()
  }

  // 下载
  handelDownload() {
    window.location.href = '../../template/areaTemplate.xlsx'
  }

  // 导入
  handleImport() {
    this.dialogData.isFileVisible = true
  }

  handleCloseFile() {
    this.dialogData.isFileVisible = false
  }

  // 弹层关闭
  private handleClose() {
    this.dialogData.visible = false
    this.getList()
  }

  private handleStatusClose() {
    this.dialogData.satatusVisible = false
    this.getList()
  }

  private resetPageIndex() {
    this.search.current = 1
  }
}
</script>
